<script setup lang="ts">
import tableList from "@/components/tableList/tableList.vue";
import Drawer from "@/views/student-manage/component/Drawer.vue";
import {useDevice} from '@/hooks/web/useDevice'
import Dialog from "@/views/channel-manage/components/Dialog.vue";
import ImportFile from "@/views/student-entry/component/ImportFile.vue";
const {mobile} = useDevice()
import {useCommon} from '@/hooks/web/useCommon'
import {channelList,channelDel} from "@/api/channel";
import {usePermissions} from "@/hooks/web/usePermissions";
import {ElMessage, ElMessageBox} from "element-plus";
const {permissions, fetchPermissions} = usePermissions();

onMounted(() => {
  fetchData()
  fetchPermissions()
})

const {
  mobileShow,
  pageData
} = useCommon()

let searchForm = reactive({
  name: '',
  phone: '',
  project_manager: '',
  school_id: '',
  project_id: '',
  yixiang: '',
  contract_status: '',
})

let importRef = ref('')
let importVisible = ref(false)
let visible = ref(false)
let loading = ref(false)
let drawerVisit = ref('')
let dialogChannel = ref('')
let drawerVisible = ref(false)
let tableData = ref([])
const tableHeader = reactive([
  {
    label: '系统时间', prop: 'created_time', width: '170px', showHtml: true, code: (row) => {
      if (row.created_change == 1) {
        return '<span style="color: #F56C6C">' + row.created_time + '</span>'
      } else {
        return '<span style="color: #67C23A">' + row.created_time + '</span>'
      }
    }
  },
  {
    label: '客户机构', prop: 'name', type: 'btn', method: (row) => {
      handleDetail(row)
    }
  },
  {label: '客户项目负责人', prop: 'project_manager'},
  {label: '联系方式', prop: 'phone'},
  {label: '合作院校', prop: 'school_name'},
  {label: '意向类型', prop: 'yixiang_name'},
  {label: '录入人', prop: 'realname', width: '90px'},
  {
    label: '签约情况', prop: 'contract_status', width: '90px', type: 'html', code: (row) => {
      if (row.contract_status == 2) {
        return '<span style="color: #67C23A">已签约</span>'
      } else {
        return '<span style="color: #F56C6C">未签约</span>'
      }
    }
  },
  {
    label: '历史回访记录', list: '', default: '历史回访记录', width: '115px', type: 'btn', method: (row) => {
      handleHistory(row)
    }
  }
])

const tableOptions = reactive({
  label: '操作',
  width: '100px',
  value: 0,
  options: [
    {
      label: '删除',
      icon: 'delete',
      method: (row) => {
        handleDelete(row)
      }
    },
  ]
})

const onSearch = () => {
  pageData.currentPage = 1
  fetchData();
}

let searchRef = ref('')
const handleReset = () => {
  searchRef.value.resetFields()
}
const handleDelete = (row) => {
  ElMessageBox.confirm('确认要删除 ? 一旦删除无法恢复', '提示', {type: 'warning'}).then(async () => {
    let res = await channelDel({id: row.id})
    if (res) {
      ElMessage({message: '删除成功', type: 'success'})
      fetchData();
    }
  }).catch(() => {
  })
}


const handleAdd = () => {
  visible.value = true
}

const handleClose = (type) => {
  visible.value = false
  if (type === 'submit') {
    fetchData()
  }
}

const handleCancel = async () => {
  drawerVisible.value = false
}

const handleImport = () => {
  importVisible.value =true
  importRef.value.importForm.type = 'channel'
}

const handleHistory = async (row) => {
  drawerVisible.value = true
  drawerVisit.value.visitType = 2
  console.log(drawerVisit.value);
  drawerVisit.value.channel = Object.assign(drawerVisit.value.channel, {
    name: row.name,
    project_manager: row.project_manager,
    channel_id: row.id
  })
  drawerVisit.value.getChannelVisit()
}

const handleDetail = async (row) => {
  visible.value = true;
  nextTick(() => {
    dialogChannel.value.fetchInfo(row.id)
  })
}

const handlePageChange = (param) => {
  pageData.pageSize = param.limit
  pageData.currentPage = param.page
  fetchData()
}

const fetchData = async () => {
  importVisible.value = false
  let params = searchForm
  params.page = pageData.currentPage
  params.limit = pageData.pageSize
  loading.value = true
  let res = await channelList(params)
  loading.value = false
  if (res) {
    tableData.value = res.data.list
    pageData.total = res.data.page.amount
  }
}

</script>

<template>
  <import-file :excel-visible="importVisible" @handle-close="fetchData" ref="importRef"></import-file>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="searchForm" class="el-input-form" ref="searchRef">
        <el-form-item label="客户机构" prop="name" v-show="mobileShow || !mobile">
          <el-input clearable placeholder="请输入学生姓名" v-model="searchForm.name">
          </el-input>
        </el-form-item>
        <el-form-item label="客户项目负责人" prop="project_manager" v-show="mobileShow || !mobile">
          <el-input clearable placeholder="请输入联系方式" v-model="searchForm.project_manager">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone" v-show="mobileShow || !mobile">
          <el-input clearable placeholder="请输入联系电话" v-model="searchForm.phone">
          </el-input>
        </el-form-item>
        <el-form-item label="意向类型" prop="yixiang" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.yixiang" placeholder="请选择意向类型" clearable>
            <el-option label="准客户" value="1"></el-option>
            <el-option label="意向客户" value="2"></el-option>
            <el-option label="一般客户" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约情况" prop="contract_status" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.contract_status" placeholder="请选择当前状态" clearable>
            <el-option label="未签约" value="1"></el-option>
            <el-option label="已签约" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-show="mobile" plain @click="mobileShow = !mobileShow">{{ mobileShow ? '取消高级查询' : '高级查询' }}</el-button>
          <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
          <el-button @click="handleReset" icon="RefreshRight">重置</el-button>
          <el-button type="primary" v-if="permissions.import" @click="handleImport" plain icon="UploadFilled">批量导入</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" v-loading="loading">
      <el-button @click="handleAdd" plain icon="plus" type="primary" style="margin-bottom: 10px">新增渠道</el-button>
      <tableList :table-data="tableData"
                 :page-data="pageData"
                 :table-header="tableHeader"
                 :table-options="tableOptions"
                 @handlePageChange="handlePageChange"
      ></tableList>
    </el-col>
  </el-row>
  <Drawer v-model:drawerVisible="drawerVisible" @cancelClick="handleCancel" ref="drawerVisit"/>
  <Dialog :dialog-form-visible="visible" @handle-close="handleClose" :mobile="mobile" ref="dialogChannel"></Dialog>
</template>

<style scoped lang="less">
/deep/ .el-input-form {
  .el-input {
    width: 192px;
  }
}
</style>